<template>
    <el-table :data="currentData" stripe border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="TITLE">
            <template #default="scope">
                <a :href="scope.row.uri">{{ scope.row.title }}</a>
                <p>{{ scope.row.description }}</p>
            </template>
        </el-table-column>
        <el-table-column label="ACTIONS" width="360px">
            <template #default="scope">
                <el-form :inline="true">
                    <el-select filterable @change="((v) => { setCategory(scope.row, v, scope.$index) })"
                        placeholder="Select" size="small" style="width: 240px">
                        <el-option v-for="   item    in    categories   " :key="item.id" :label="item.name"
                            :value="item.id" />
                    </el-select>
                    <el-button class="btn" link type="danger" size="small"
                        @click="deleteWeb(scope.row.id)">直接删除</el-button>
                </el-form>
            </template>
        </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
        <el-select filterable @change="setMultiCategory" placeholder="批量设置栏目" size="small" style="width: 240px">
            <el-option v-for="item in categories" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
    </div>
</template>

<style scoped>
.btn {
    margin-left: 20px;
}
</style>

<script setup>
import config from "@/config";
import router from "@/router";
import { post } from "@/utils/http";
import { onMounted, ref } from 'vue';


const props = defineProps(['webs', 'categories'])
const currentData = ref(null)
const updatingIds = ref([])

onMounted(() => {
    currentData.value = props.webs
})

const handleSelectionChange = (val) => {
    let ids = []
    for (let item of val) {
        ids.push(item.id)
    }
    updatingIds.value = ids
}

const setMultiCategory = (cid) => {
    if (updatingIds.value.length < 1 || cid < 1) {
        return
    }
    post(config.config.setMultiCategory, { "web_ids": updatingIds.value, "cate_id": cid }).then((resp) => {
        let res = resp.data
        if (res.errCode != 0) {
            alert(res.data)
        } else {
            router.go(0)
        }
    })
}

const deleteWeb = (id) => {
    post(config.config.deleteWeb, { "id": id }).then((resp) => {
        let res = resp.data
        if (res.errCode != 0) {
            alert(res.data)
        } else {
            router.go(0)
        }
    })
}

const setCategory = (web, cid, idx) => {
    web.category_id = cid
    post(config.config.updateWeb, web).then((resp) => {
        let res = resp.data
        if (res.errCode != 0) {
            alert(res.data)
        } else {
            let tmpData = currentData.value
            tmpData.splice(idx, 1)
            currentData.value = tmpData
            if (tmpData.length == 0) {
                router.go(0)
            }
        }
    })
}
</script>
